<template>
  <div class="video-live">
    <div class="search-panel">
      <video-tree 
        ref="videoTree"
        :auto-load="false"
        show-checkbox
        :height="siteContentViewHeight"
        @change="change"
      />
    </div>
    <div class="video-panel" ref="panel">
        <main-video 
        ref="video"
        v-if="appkey"
        @onSuccess="onSuccess"
        :playMode="0"
        layout="2x2"
        id="video1"
        :ichannelId="[]"
        :swfHeight="swfHeight"
        :swfWidth="swfWidth"
        :appkey="appkey"
        :secret="secret"
        :port="port"
        :ip="ip" />
    </div> 
  </div>
</template>
<script>
import VideoTree from '../../components/video-tree';
import MainVideo from '../../components/video';
export default {
  components: {
    VideoTree, MainVideo
  },
  data() {
    return {
      videoList: [],
      swfWidth: '',
      swfHeight: '',
      appkey: '',
      secret: '',
      port: '',
      ip: ''
    };
  },
  computed: {
    documentClientHeight: {
      get() { return this.$store.state.common.documentClientHeight; }
    },
    siteContentViewHeight() {
      var height = this.documentClientHeight - 70 - 30 - 20 - 60 - 2;
      if (this.$route.meta.isTab) {
        height -= 40;
        return height + 'px';
      }
    }
  },
  methods: {
    // 控件初始化完成
    onSuccess() {
      this.$refs.videoTree.load();
    },
    change(node, check) {
      if (check) {
        if (node.ichannelId) {
          this.$refs.video.manualpreview(node.ichannelId);
        }
      }
    },
    getVideoInfo() {
      const params = {
        url: `/api/ems/video/get`,
        type: 'post',
        params: {

        }
      };
      this.$ajax(params).then(resp => {
        const { result, data } = resp;
        if (result) {
          this.appkey = data.accessName;
          this.secret = data.accessPwd;
          this.port = data.videoPort;
          this.ip = data.videoAddress;
        }
      });
    }
  },
  created() {

  },
  mounted() {
    const panel = this.$refs.panel;
    this.swfWidth = panel.clientWidth;
    this.swfHeight = panel.clientHeight;
    this.getVideoInfo();
  },
  beforeDestroy() {

  }
};
</script>

<style lang="scss" scoped>
.video-live{
  width: 100%;
  height: 100%;
  display: flex;
  .search-panel{
    border: 1px solid rgba(0, 21, 41, 0.12);
  }
  .video-panel{
      flex: 1;
      height: 100%;
      overflow-y: auto;
     .box{
       width: 240px;
       height: 240px;
       margin: 10px;
       margin-top: 0;float: left;
     }
  }

}
</style>